<template>
    <div class="divShow">
        <el-row>
            <el-col :span="24">
                <div style="padding: 30px;">
                    <!-- 搜索框 -->
                    <el-form :inline="true" :model="searchClient" class="demo-form-inline" v-if="showSearch">
                        <el-form-item label="客户编码">
                            <el-input v-model="searchClient.clientCode" placeholder="请输入客户编码"></el-input>
                        </el-form-item>
                        <el-form-item label="客户名称">
                            <el-input v-model="searchClient.clientName" placeholder="请输入客户名称"></el-input>
                        </el-form-item>
                        <el-form-item label="客户简称">
                            <el-input v-model="searchClient.clientNick" placeholder="请输入客户简称"></el-input>
                        </el-form-item>
                        <el-form-item label="客户英文名称">
                            <el-input v-model="searchClient.clientEn" placeholder="请输入客户英文名称"></el-input>
                        </el-form-item>
                        <el-form-item label="是否启用">
                            <el-select v-model="searchClient.enableFlag" placeholder="是否启用">
                                <el-option label="是" value="Y"></el-option>
                                <el-option label="否" value="N"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="checkClient">查询</el-button>
                            <el-button @click="cleanClient">重置</el-button>
                        </el-form-item>
                    </el-form>


                    <el-row>
                        <el-col :span="22">
                            <!-- 按钮 -->
                            <el-button type="primary" size="small" @click="changeDialog(null)">新增</el-button>
                            <el-button type="success" size="small" :disabled="!judgmentCh"
                                @click="changeDialog(SelClientId)">修改</el-button>
                            <el-button type="danger" size="small" :disabled="!judgmentDe"
                                @click="delJudg">删除</el-button>
                            <el-button type="warning" size="small" @click="exportExcel">导出</el-button>
                        </el-col>
                        <el-col :span="2">
                            <div>
                                <el-tooltip content="隐藏搜索" placement="top">
                                    <el-button icon="el-icon-search" circle @click="toggleSearch"></el-button>
                                </el-tooltip>
                                <el-tooltip content="刷新" placement="top">
                                    <el-button icon="el-icon-refresh" circle @click="refresh"></el-button>
                                </el-tooltip>
                            </div>
                        </el-col>
                    </el-row>
                    <!-- 表格 -->
                    <el-table :data="clientTable" ref="clientTable" style="width: 100%;"
                        @selection-change="handleSelectionChange">

                        <el-table-column type="selection" width="55">
                        </el-table-column>

                        <el-table-column prop="clientId" label="客户ID" v-if="false">
                        </el-table-column>
                        <el-table-column prop="clientCode" label="客户编码">
                        </el-table-column>
                        <el-table-column prop="clientName" label="客户名称">
                        </el-table-column>
                        <el-table-column prop="clientNick" label="客户简称">
                        </el-table-column>
                        <el-table-column prop="clientType" label="客户类型">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.clientType === 'ENTERPRISE'">企业客户</el-tag>
                                <el-tag v-else>{{ scope.row.clientType }}</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column prop="tel" label="客户电话">
                        </el-table-column>
                        <el-table-column prop="contact1" label="联系人">
                        </el-table-column>
                        <el-table-column prop="contact1Tel" label="联系人电话">
                        </el-table-column>
                        <el-table-column prop="enableFlag" label="是否启用">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.enableFlag === 'Y'">是</el-tag>
                                <el-tag v-else type="danger">否</el-tag>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-col :span="12">
                                    <el-link type="primary" @click="changeDialog(scope.row.clientId)">修改</el-link>
                                </el-col>
                                <el-col :span="12">
                                    <el-link type="primary" @click="delDialog(scope.row.clientId)">删除</el-link>
                                </el-col>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 分页模块 -->
                    <el-pagination :page-size="searchClient.pageSize" :total="searchClient.total"
                        @current-change="searchClientChange" layout="prev, pager, next">
                    </el-pagination>

                    <!-- dialog -->
                    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="60%" class="rounded-dialog"
                        :close-on-click-modal="false" @close="closeClientDialog">
                        <el-form :model="AddClient" ref="ClientForm" :rules="rules" style="padding-left:50px;">

                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="客户编码" prop="clientCode">
                                        <el-input v-model="AddClient.clientCode" autocomplete="off"
                                            style="width: 180px;" placeholder="请输入客户编码"></el-input>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="12">
                                    <el-form-item label="客户名称" prop="clientName">
                                        <el-input v-model="AddClient.clientName" autocomplete="off"
                                            style="width: 180px;" placeholder="请输入客户名称"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="8">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="客户简称" prop="clientNick">
                                            <el-input v-model="AddClient.clientNick" autocomplete="off"
                                                style="width: 180px;" placeholder="请输入简称"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="grid-content bg-purple-light">
                                        <el-form-item label="客户英文名称" prop="clientEn">
                                            <el-input v-model="AddClient.clientEn" autocomplete="off"
                                                style="width: 150px;" placeholder="请输入客户英文名称"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="客户类型" prop="clientType">
                                            <el-select v-model="AddClient.clientType" placeholder="请选择客户类型"
                                                style="width: 150px;">
                                                <el-option label="企业客户" value="企业客户"></el-option>
                                                <el-option label="个人" value="个人"></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="24">
                                    <div class="grid-content bg-purple-dark">
                                        <el-form-item label="客户简介" prop="clientDes">
                                            <el-input v-model="AddClient.clientDes" type="textarea" :rows="2"
                                                autocomplete="off" style="width: 620px;" placeholder="请输入内容"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="24">
                                    <div class="grid-content bg-purple-dark">
                                        <el-form-item label="客户地址" prop="address">
                                            <el-input v-model="AddClient.address" type="textarea" :rows="2"
                                                autocomplete="off" style="width: 620px;" placeholder="请输入内容"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="客户官网地址" prop="website">
                                        <el-input v-model="AddClient.website" autocomplete="off"
                                            style="width: 144px;"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="客户邮箱地址" prop="email">
                                        <el-input v-model="AddClient.email" autocomplete="off"
                                            style="width: 144px;"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="客户电话" prop="tel">
                                        <el-input v-model="AddClient.tel" autocomplete="off"
                                            style="width: 144px;"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="客户LOGO" prop="clientLogo">
                                        <el-input v-model="AddClient.clientLogo" autocomplete="off"
                                            style="width: 144px;"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="8">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="联系人1" prop="contact1">
                                            <el-input v-model="AddClient.contact1" autocomplete="off"
                                                style="width: 144px;"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="grid-content bg-purple-light">
                                        <el-form-item label="联系人1-电话" prop="contact1Tel">
                                            <el-input v-model="AddClient.contact1Tel" autocomplete="off"
                                                style="width: 144px;"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="联系人1-邮箱" prop="contact1Email">
                                            <el-input v-model="AddClient.contact1Email" autocomplete="off"
                                                style="width: 144px;"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="8">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="联系人2" prop="contact2">
                                            <el-input v-model="AddClient.contact2" autocomplete="off"
                                                style="width: 144px;"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="grid-content bg-purple-light">
                                        <el-form-item label="联系人2-电话" prop="contact2Tel">
                                            <el-input v-model="AddClient.contact2Tel" autocomplete="off"
                                                style="width: 144px;"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="8">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="联系人2-邮箱" prop="contact2Email">
                                            <el-input v-model="AddClient.contact2Email" autocomplete="off"
                                                style="width: 144px;"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="12">
                                    <div class="grid-content bg-purple">
                                        <el-form-item label="社会信用代码" prop="creditCode">
                                            <el-input v-model="AddClient.creditCode" autocomplete="off"
                                                style="width: 144px;"></el-input>
                                        </el-form-item>
                                    </div>
                                </el-col>
                                <el-col :span="12">
                                    <div class="grid-content bg-purple-light">
                                        <el-form-item label="是否启用" prop="enableFlag">
                                            <el-radio v-model="AddClient.enableFlag" label="Y">是</el-radio>
                                            <el-radio v-model="AddClient.enableFlag" label="N">否</el-radio>
                                        </el-form-item>
                                    </div>
                                </el-col>
                            </el-row>

                            <el-row style="padding-top: 20px;">
                                <el-col :span="24">
                                    <el-form-item label="备注" prop="remark">
                                        <el-input v-model="AddClient.remark" type="textarea" :rows="2"
                                            autocomplete="off" style="width: 640px;" placeholder="请输入备注"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                        </el-form>
                        <div slot="footer" class="dialog-footer">
                            <el-button @click="closeClientDialog">取 消</el-button>
                            <el-button type="primary" @click="submitForm('ClientForm')">确 定</el-button>
                        </div>
                    </el-dialog>
                </div>
            </el-col>
        </el-row>

    </div>
</template>
<script>
import axios from 'axios';
import qs from 'qs';
import * as XLSX from 'xlsx'; // 使用命名导入
import FileSaver from 'file-saver';
import excelExport from '../../utils/excel-export';
export default {
    data() {
        return {
            // 设置dialog默认不显示
            dialogFormVisible: false,
            //根据是否有id输入判断标题
            dialogTitle: '',
            // 分页查询数据
            searchClient: {
                clientCode: '',
                clientName: '',
                clientNick: '',
                clientEn: '',
                enableFlag: '',
                pageSize: 5,
                pageNo: 1,
                total: 0,
            },
            // 查询显示表格
            clientTable: [],
            //新增AddClient或者修改AddClient
            AddClient: {
                clientId: '',
                clientCode: '',
                clientName: '',
                clientNick: '',
                clientEn: '',
                clientDes: '',
                clientLogo: '',
                clientType: '',
                address: '',
                website: '',
                email: '',
                tel: '',
                contact1: '',
                contact1Tel: '',
                contact1Email: '',
                contact2: '',
                contact2Tel: '',
                contact2Email: '',
                creditCode: '',
                enableFlag: '',
                remark: '',
            },
            selectedRows: [],
            judgmentCh: false,
            judgmentDe: false,
            //当前选中行的ClientId的数组
            arrayClientId: [],
            // 获取当前选中行的ClientId
            SelClientId: '',
            showSearch: true, // 控制搜索框的显示和隐藏
            columns: [
                'clientCode',
                'clientName',
                'clientNick',
                'clientType',
                'tel',
                'contact1',
                'contact1Tel',
                'enableFlag',
            ],
            rules: {
                clientCode: [
                    { required: true, message: '请输入客户编码', trigger: 'blur' },
                    { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'blur' }
                ],
                clientName: [
                    { required: true, message: '请输入客户名称', trigger: 'blur' },
                    { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
                ],
                enableFlag: [
                    { required: true, message: '请选择是否启用', trigger: 'change' }
                ]
            }
        }
    },

    mounted() {
        this.checkListClient();
    },
    methods: {
        // 导出为excel文件
        exportExcel() {
            excelExport(this.$refs.clientTable.columns, this.clientTable, this.formatJson, "客户信息.xlsx");
        },
        formatJson(columns, jsonData) {
            // 防御性编程，确保 jsonData 是数组
            if (!Array.isArray(jsonData)) {
                return [];
            }

            return jsonData.map(row => columns.map(col => {
                const value = row[col.prop];
                if (['enableFlag'].includes(col.prop)) {
                    return value === 'Y' ? '是' : '否';
                } else {
                    return value;
                }
            }));
        },
        //刷新按钮
        refresh() {
            location.reload();
        },
        //是否显示搜索框
        toggleSearch() {
            // 切换搜索框的显示和隐藏
            this.showSearch = !this.showSearch;
        },
        //删除判断
        delJudg() {
            if (this.selectedRows.length === 1) {
                //删除单个id
                this.delDialog(this.SelClientId)
            } else {
                //删除多个id
                this.$confirm("确定要删除" + this.arrayClientId + " 这" + this.arrayClientId.length + "条数据吗？", '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.delClientIdArray(this.arrayClientId)
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },
        //获取当前选中表格行的状态
        handleSelectionChange(selection) {
            this.selectedRows = selection;

            // 更新 arrayClientId
            this.arrayClientId = selection.map(row => row.clientId);

      
            if (selection.length === 1) {
                //获取单个id
                this.SelClientId = this.selectedRows[0].clientId
                console.log(this.SelClientId);

                this.judgmentDe = true;
                this.judgmentCh = true;
            } else if (selection.length > 1) {
                //获取一组id
                let rowsLength = this.selectedRows.length
                for (let index = 0; index < rowsLength; index++) {
                    this.arrayClientId[index] = this.selectedRows[index].clientId;
                }
                this.judgmentCh = false;
                this.judgmentDe = true;
            } else {
                this.judgmentCh = false;
                this.judgmentDe = false;
            }
        },
        //根据传递进来的MdItemId数组来进行批量删除
        delClientIdArray(arrayClientId) {
            this.$axios.delete("http://localhost:9970/emsSystem/api/client/delClientIdArray", { data: arrayClientId }).then((res) => {
                if (res.data.code === 200) {
                    //删除成功
                    this.$message.success("删除成功");
                    this.checkListClient();
                }
            })
        },
        //根据id删除指定数据
        delDialog(clientId) {
            this.$confirm("确定要删除该编号为 " + clientId + " 的信息, 是否继续?", '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.delete("http://localhost:9970/emsSystem/api/client/delClient/" + clientId).then((res) => {
                    if (res.data.code === 200) {
                        //删除成功
                        this.$message.success("删除成功");
                        this.checkListClient();
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //关闭dialog并且清空里面的数据
        closeClientDialog() {
            this.$refs.ClientForm.resetFields();
            this.AddClient.clientId = "",
                this.dialogFormVisible = false
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 表单验证通过，执行提交操作
                    this.AddOrChClient();
                } else {
                    console.log('表单验证失败');
                    return false;
                }
            });
        },
        //添加或者修改Client
        AddOrChClient() {
            let qsClient = qs.stringify(this.AddClient);
            this.$axios.post("http://localhost:9970/emsSystem/api/client/AddOrChClient", qsClient).then((res) => {
                if (res.data.code === 200) {
                    //修改成功
                    this.$message.success("修改或新增成功");
                    this.dialogFormVisible = false;
                    this.checkListClient();
                }
            })
        },
        //改变dialog显示状态
        changeDialog(id) {
            this.dialogFormVisible = true
            if (id == null) {
                this.dialogTitle = "新增客户信息"
            } else {
                console.log(id);
                this.dialogTitle = "修改客户信息"
                this.AddClient.clientId = id
                this.checkClientById(id);
            }

        },
        //根据ClientId查询数据
        checkClientById(clientId) {
            this.$axios.post("http://localhost:9970/emsSystem/api/client/checkClientById/" + clientId).then((res) => {
                if (res.data.code === 200) {
                    this.AddClient = res.data.data
                }
            })
        },
        // 改变页码
        searchClientChange(value) {
            this.searchClient.pageNo = value;
            this.checkListClient();
        },
        // 进行条件搜索
        checkClient() {
            this.checkListClient();
        },
        // 清空搜索框
        cleanClient() {
            this.searchClient.clientCode = ""
            this.searchClient.clientEn = ""
            this.searchClient.enableFlag = ""
            this.searchClient.clientName = ""
            this.searchClient.clientNick = ""
        },
        // 查询MdItem数据方法
        checkListClient() {

            let qsStr = qs.stringify(this.searchClient);

            this.$axios.post("http://localhost:9970/emsSystem/api/client/checkListClient", qsStr).then((res) => {
                if (res.data.code === 200) {
                    this.clientTable = res.data.data.records
                    this.searchClient.pageNo = res.data.data.current
                    this.searchClient.pageSize = res.data.data.size
                    this.searchClient.total = res.data.data.total
                }
            })
        }
    }
}

</script>
<style>
.divShow {
    background-color: white;
    border-radius: 10px;
}

.rounded-dialog .el-dialog {
    border-radius: 10px;
    /* 设置圆角 */
}
</style>
